<template>
	<div>
		<div class="header">
			<div class="usertitle"></div>
			<div class="usertitlename">
				<input type="text" v-model="username">
			</div>
		</div>
		<div class="headerB">
			<ul>
				<li @click="modify">修改信息</li>
				<li @click="Collection">我的收藏</li>
				<li>消息中心</li>
			</ul>
		</div>
		<div class="logout" @click="logOut">退出登录</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				id:'',
				access_token:'',
				receive:'',
				username:''
			}
		},
		mounted() {
			console.log(JSON.parse(localStorage.getItem('userinfo')));
			this.receive = JSON.parse(localStorage.getItem('userinfo'));
			this.id=this.receive.id;
			this.access_token=this.receive.access_token;
			this.username=this.receive.username;
		},
		methods:{
			// 修改
			modify:function(){
				this.$router.push({
					path:'/modify',
				})
			},
			// 收藏
			Collection:function(){
				this.$router.push({
					path:'/myCollection'
				})
			},
			// 退出登录
			logOut:function(){
				this.$http.post(' http://chonghekj.com/daily/index.php/Home/user/logout',this.$qs.stringify({
					id:this.id,
					access_token:this.access_token
				}))
				.then((res)=>{
					console.log(res)
					this.$router.push({
						path:'/login',
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.usertitle{
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: #ddd;
		margin: 0 auto;
		margin-top: 40px;
	}
	.usertitlename{
		text-align: center;
		input{
			width: 200px;
			text-align: center;
			border: none;
			margin-top: 20px;
		}
	}
	.headerB{
		margin-top: 20px;
		ul li{
			padding: 10px 20px;
			border-top: 1px solid #ddd;
		}
	}
	.logout{
		width: 86%;
		border: 1px solid #333;
		text-align: center;
		line-height: 38px;
		color: red;
		margin: 0 auto;
		margin-top: 60px;
		border-radius: 20px;
		font-size: 18px;
		font-weight: 600;
	}
</style>
